<template>
  <i :class="`steve-icon steve-icon-${name}`" :style="getStyle" />
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue';

const props = defineProps({
  // 字体名称
  name: {
    type: String,
    default: '',
  },
  // 字体大小
  size: {
    type: String,
    default: '20px',
  },
  // 字体颜色
  color: {
    type: String,
    default: '',
  },
});

const getStyle = computed((): CSSProperties => {
  const styles = {
    fontSize: props.size,
    color: '',
  };

  if (props.color) {
    styles.color = props.color;
  }
  return styles;
});
</script>
